<template>
    <el-form v-model="userForm" label-width="100px" style="padding: 10px;margin-top: 20px;margin-bottom: 30px;">
        <el-form-item label="用户名">
            <el-input class="detail-input" v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="账号">
            <el-input class="detail-input" v-model="userForm.userAccount" readonly></el-input>
        </el-form-item>
        <el-form-item label="头像：">
            <el-upload class="avatar-uploader" :action="''" :auto-upload="false" :show-file-list="false"
                :on-change="handleAvatarChangeIcon">
                <el-avatar v-if="userForm.userPhoto" :size="120" :src="userForm.userPhoto" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="邮箱">
            <div v-if="userForm.email">
                <el-text>{{ userForm.email }}</el-text>
                <el-tooltip placement="top">
                    <template #content> 可用于登录或找回密码 </template>
                    <span style="cursor: pointer;" class="tooltip-style">已绑定</span>
                </el-tooltip>
            </div>
            <template v-else>
                <el-link @click="router.push({name:'BindEmail'})">去绑定</el-link>
                <!-- <el-link>去绑定</el-link> -->
                <el-tooltip placement="top">
                    <template #content> 绑定邮箱可用于<br />登录或找回密码 </template>
                    <img style="width: 20px;" src="/images/question.svg" />
                </el-tooltip>
            </template>
        </el-form-item>
        <el-form-item label="手机号">
            <div v-if="userForm.userPhone">
                <el-text>{{ userForm.userPhone }}</el-text>
                <el-tooltip placement="top">
                    <template #content> 可用于登录或找回密码 </template>
                    <span style="cursor: pointer;" class="tooltip-style">已绑定</span>
                </el-tooltip>
            </div>
            <template v-else>
                <el-link>去绑定</el-link>
                <el-tooltip placement="top">
                    <template #content> 绑定手机可用于<br />登录或找回密码 </template>
                    <img style="width: 20px;" src="/images/question.svg" />
                </el-tooltip>
            </template>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-text>{{ formatterDate(userForm.createTime) }}</el-text>
        </el-form-item>
        <el-form-item class="save-button">
            <el-button type="primary" @click="onUpdate">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import store from '@/stores';
import { onMounted, reactive, ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage, type UploadProps } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { useUploadPictureApi } from '@/api/user/user';
import { formatterDate } from '@/util/dateFormat';

const router = useRouter()
const route = useRoute()

const userForm = reactive({
    userId: "",
    userName: "",
    userPhoto: "",
    userAccount: "",
    email: "",
    collegeId: "",
    userPhone: "",
    userRole: 0,
    createTime: ""
})

onMounted(() => {
    Object.assign(userForm, store.useUserStore.user)
})

const handleAvatarChangeIcon: UploadProps['onChange'] = (file, fileList) => {
    const isJPG = file.raw!.type === 'image/jpeg'
    const isPNG = file.raw!.type === 'image/png'
    // const isLt2M = file.raw.size / 1024 / 1024 < 0.5 //限制上传文件的大小
    if (!isPNG && !isJPG) {
        ElMessage({
            message: '上传图片只能是 JPG/PNG 格式!',
            type: 'warning'
        })
        return false
    } else {
        uploadImg(file)
    }
}
const uploadImg = async (file: any) => {
    let formData = new FormData()
    formData.append('img', file.raw)
    await useUploadPictureApi(formData)
        .then((res) => {
            const { data } = res
            userForm.userPhoto = data
        })
}

const onUpdate = () => {
    store.useUserStore.updateInfoAction(userForm).then(() => {
        ElMessage({
            message: '修改成功',
            type: 'success'
        })
        refresh()
    })
}

function refresh() {
    // 刷新当前路由
    const { fullPath } = route
    router.replace({
        path: '/redirect' + fullPath
    })
}

</script>

<style scoped lang="scss">
.detail-input {
    width: 200px;
}

// .avatar-uploader .avatar {
//     width: 128px;
//     height: 128px;
//     border-radius:100%;
//     display: block;
// }

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 128px;
    height: 128px;
    text-align: center;
}

.tooltip-style {
    margin-left: 10px;
    font-size: small;
    color: #5df0a2;
}
</style>